<template>
    <a-layout-header class="header">
        <div class="logo">用户权限管理系统</div>
        <div style="float: right;font-size: 20px;color: white">{{loginUser.username}}</div>
    </a-layout-header>
</template>

<script>
    import store from '@/store'
    import {ref, onMounted} from 'vue'

    export default {
        name: "Header",
        setup() {
            const loginUser = ref({})

            onMounted(() => {
                loginUser.value = store.state.user
            })

            return {
                loginUser
            }
        }
    }
</script>

<style scoped>
    .logo {
        float: left;
        width: 200px;
        font-size: 20px;
        color: blue;
    }
</style>